<template>
    <div class="headerHeight">
        <view v-if="type === 'header' || type === 'all'"
            :style="{ width: '100%', height: `${statusBarHeight}px`, background: '#fff' }">
        </view>
        <view v-if="type === 'all'" :style="{ width: '100%', height: `${capsuleHeight}px`, background: '#fff' }"></view>
    </div>
</template>

<script>
export default {
    props: {
        type: {
            type: String,
            default: 'all'
        }
    },
    data() {
        return {
            statusBarHeight: 0,
            capsuleHeight: 0,
        }
    },
    mounted() {
        let res = wx.getSystemInfoSync()
        this.statusBarHeight = res.statusBarHeight
        let capsule = wx.getMenuButtonBoundingClientRect()
        this.capsuleHeight = (capsule.top - res.statusBarHeight) * 2 + capsule.height
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.headerHeight {
    width: 100%;
}
</style>